<template>
  <div id="app">
    <header id="header" class="auto-rem mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">
        {{name}}
      </h1>
      <a class="mui-icon mui-icon-home mui-pull-right" @tap='backToHome'></a>
    </header>
    <div class="mui-content">
      <div class="mui-scroll-wrapper" style="background-color: #efeff4" @dragend="dragPanel">
        <div class="mui-scroll">
          <tmall-mui-slider :slides="slides" :isProduct="true"></tmall-mui-slider>
          <div class="product-title">
            <span class="title-text">
              {{name}}
            </span>
            <span class="sub-title-text">
              {{subname}}
            </span>
            <template v-if="isscore == 1">
              <span v-if="fullscorebuy == 0" class="price-text">
                ￥{{ (old_price / 100).toFixed(2) }}
                <span class="score-text"> + 积分{{ (discount_price / 100 * 10).toFixed(0) }}</span>
              </span>
              <span v-else class="price-text">
                积分{{ (discount_price / 100 * 10).toFixed(0) }}
              </span>
            </template>
            <template v-else>
              <span class="price-text">
                ￥{{ (price / 100).toFixed(2) }}
              </span>
            </template>
            <div style="margin-left: 10px" @tap='openLabelPanel'>
              <span v-for="label in labels" style="font-size: 12px; color: lightgray; margin: 5px;">
                <i v-if="label.icon_style == 0" class="mui-icon mui-icon-checkmarkempty"></i>
                <i v-if="label.icon_style == 1" class="mui-icon mui-icon-closeempty"></i>
                {{label.name}}
              </span>
            </div>
          </div>
          <div class="product-panel">
            <ul class="mui-table-view">
              <li class="mui-table-view-cell">
                <a class="mui-navigate-right" @tap='openSelectPanel'>已选
                  <span style="margin-left: .2rem;">{{buynum}}件 {{skuStr}}</span>
                </a>
              </li>
              <!--<li class="mui-table-view-cell">-->
                <!--<a class="mui-navigate-right">商品评价(17)</a>-->
              <!--</li>-->
              <li v-if="store" class="mui-table-view-cell" @tap='openStore'>
                <a class="mui-navigate-right">店铺：{{ store.name }}</a>
              </li>
              <li class="mui-table-view-cell">
                <a class="mui-navigate-right" @tap='openCategory'>分类
                  <span style="margin-left: .2rem;">{{category.name}}</span>
                </a>
              </li>
            </ul>
          </div>

          <div class="product-info-title">
            商品图片
          </div>
          <div class="product-info" v-html="detail">
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-nav-bar">
      <div class="buttons">
        <div class="item" @tap.prevent.stop="openPage('/views/shopcart.html')">
          <span class="mui-icon-extra mui-icon-extra-cart"></span>
          <span class="item-text">购物车</span>
        </div>
        <div class="item">
          <span class="mui-icon-extra mui-icon-extra-heart"></span>
          <span class="item-text">收藏</span>
        </div>
      </div>
      <div class="actions">
        <div class="action-button yellow" :class="{ biyao: isBiYao }" @tap.prevent.stop="openSelectPanel(1)">加入购物车</div>
        <div class="action-button red" :class="{ biyao: isBiYao }" @tap.prevent.stop="openSelectPanel(2)">立即购买</div>
      </div>
    </div>
    <div class="back-top" @tap="scrollTop">
      <span class="mui-icon-extra mui-icon-extra-top"></span>
    </div>
    <select-panel :product="selectproduct" :onSelect="handleSkuSelect" @numChange="buyNumChange"></select-panel>
    <label-panel :labels="labels"></label-panel>
  </div>
</template>

<script>

  import {ajax, apiDomain} from 'assets/js/Lib'
  import {mask, maskSpinner} from 'assets/js/slgMask'
  import TmallMuiSlider from 'components/TmallMuiSlider'
  import SelectPanel from 'components/SelectPanel'
  import LabelPanel from 'components/LabelPanel'

  export default {
    data() {
      return {
        slides: [],
        name: '',
        subname: '',
        price: 0,
        id: '',
        savepath: '',
        savename: '',
        detail: '<p style="text-align: center;">亲，没有描述内容～！</p>',
        selectproduct: {},
        isBiYao: false,
        isscore: 0,
        fullscorebuy: 0,
        old_price: 0,
        discount_price: 0,
        buynum: 0,
        attr1_name: null,
        attr2_name: null,
        skus: [],
        category: {name: ''},
        skuStr: '',
        labels: [],
        store: null,
      }
    },
    components: {
      TmallMuiSlider, SelectPanel, LabelPanel
    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {
    },
    //在挂载开始之前被调用
    beforeMount() {
    },
    //已成功挂载，相当ready()
    mounted() {
      const vm = this

      mui.init({
        swipeBack: false,
        statusBarBackground: '#f7f7f7'
      })

      mui('.mui-scroll-wrapper').scroll({
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: false, //是否显示滚动条
        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: true //是否启用回弹
      });

      if (mui.os.plus) {

      }
      else {
        let params = url('?')

        this.isBiYao = params.isBiYao

        ajax({
          url: '/api/product/detail',
          data: params,
          type: 'GET',
          success: (res) => {
            // let product = res.product
            let albums = res.album
            let product = res

            let myslides = []

            myslides.push(
              {url: '#', file: product.file}
            )

            albums.forEach(function (album) {
              myslides.push(
                {url: '#', file: album}
              )
            })

            this.slides = myslides
            this.name = product.name
            this.subname = product.subname
            this.price = product.price
            this.id = product.id
            this.savepath = product.file.savepath
            this.savename = product.file.savename
            this.detail = product.detail
            this.isscore = product.is_score
            this.fullscorebuy = product.full_score_buy
            this.old_price = product.old_price
            this.discount_price = product.discount_price

            if (!product.attr1_name && !product.attr2_name) {
              this.buynum = 1;
            }
            console.log('sku', product.sku);

            this.attr1_name = product.attr1_name;
            this.attr2_name = product.attr2_name;
            this.skus = product.sku;
            this.score = product.score;
            this.category = product.category;
            this.labels = product.labels;
            this.store = product.store;
            console.log('this.labels', this.labels);
          }
        })
      }

    },
    //相关操作事件
    methods: {
      buyNumChange: function (num) {
        this.buynum = num
      },
      fastBuy: function () {
        mask.show()
        document.querySelector('.mui-backdrop').appendChild(maskSpinner)
        const vm = this
        ajax({
          url: '/api/cart/add',
          data: {
            user_id: 58,
            product_id: this.id,
            buynum: this.buynum
          },
          type: 'GET',
          success: (res) => {
            vm.openPage('/views/shopcart.html')
          },
          complete: function () {
            mask.close()
          }
        })
      },
      addToCart: function () {
        mask.show()
        document.querySelector('.mui-backdrop').appendChild(maskSpinner)
        ajax({
          url: '/api/cart/add',
          data: {
//            user_id: 58,
            product_id: this.id,
            buynum: this.buynum
          },
          type: 'GET',
          success: (res) => {
            mui.toast('成功加入购物车')
          },
          complete: function () {
            mask.close()
          }
        })
      },
      openPage: function (url) {
        let pageConfig = {
          "id": url,
          "url": url,
          show: {
            autoShow: true
          },
          waiting: {
            title: '加载中...'
          }
        }
        if (!url) {
          pageConfig.id = "building"
          pageConfig.url = "building.html"
        }

        mui.openWindow(pageConfig)
      },
      openSelectPanel: function (selectPanelButtonType = 0) {
        let obj = {
          id: this.id,
          imgurl: apiDomain + '/public/uploads/' + this.savepath + this.savename,
          price: this.price,
          old_price: this.old_price,
          discount_price: this.discount_price,
          isscore: this.isscore,
          fullscorebuy: this.fullscorebuy,
          buynum: this.buynum,
          attr1_name: this.attr1_name,
          attr2_name: this.attr2_name,
          skus: this.skus,
          score: this.score,
          buttonType: selectPanelButtonType,
        }
        this.selectproduct = obj
      },
      dragPanel: function (e) {
        const backTop = document.querySelector('.back-top')
        const translateY = Math.abs(/translate(Y|\dd)?\(\s*(\w+\s*,)?\s*([^,]+)(\s*,[^)]+)?\s*\)/.exec(document.querySelector('#app .mui-scroll').style.transform)[3].slice(0, -2))
        if (translateY > document.querySelector('.mui-scroll-wrapper').getBoundingClientRect().bottom) {
          backTop.style.display = 'block'
        } else {
          backTop.style.display = 'none'
        }
      },
      scrollTop: function (e) {
        mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 200)
        document.querySelector('.back-top').style.display = 'none'
      },
      openCategory() {
        let url = '/views/category.html?category_id=' + this.category.id;
        let pageConfig = {
          "id": url,
          "url": url,
          show: {
            autoShow: true
          },
          waiting: {
            title: '加载中...'
          }
        }

        mui.openWindow(pageConfig)
      },
      openStore() {
        let url = '/views/store.html?store_id=' + this.store.id;
        let pageConfig = {
          "id": url,
          "url": url,
          show: {
            autoShow: true
          },
          waiting: {
            title: '加载中...'
          }
        }

        mui.openWindow(pageConfig)
      },
      handleSkuSelect(sku) {
        let skuStr = '';
        if (sku.attr1) {
          skuStr += sku.attr1;
        }
        if (sku.attr2) {
          skuStr += '，' + sku.attr2;
        }

        this.price = sku.price;
        this.score = sku.score;
        this.old_price = sku.old_price;
        this.discount_price = sku.discount_price;

        this.skuStr = skuStr;
      },
      backToHome() {
        window.location.href = '/views/slghome.html';
      },
      openLabelPanel() {
        mui('.slg-product-labels').popover('show');
      },
    }
  }
</script>

<style lang="less">
  .bottom-nav-bar {
    width: 10rem;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
  }

  .buttons {
    width: 3.3rem;
    height: 1.5625rem;
    float: left;
    overflow: hidden;
    border-top: 1px solid #cccccc;
    .mui-icon-extra {
      font-size: .75rem;
      line-height: .75rem;
    }
    .item {
      width: 50%;
      height: 1.5625rem;
      float: left;
      text-align: center;
      padding-top: .15rem;
      color: #333333;
      opacity: .8;
      border-right: 1px solid #cccccc;
      span {
        display: block;
      }
      .item-text {
        font-size: .375rem;
        line-height: .5rem;
      }
    }
  }

  .actions {
    width: 6.7rem;
    height: 1.5625rem;
    overflow: hidden;
    float: left;
    border-top: 1px solid #cccccc;
    .action-button {
      width: 50%;
      color: #ffffff;
      font-size: .46875rem;
      float: left;
      height: 100%;
      line-height: 1.5625rem;
      text-align: center;
      &.yellow {
        background-color: #ffb03f;
        &.biyao {
          background-color: white;
          color: #7f4395;
        }
      }
      &.red {
        background-color: #f23030;
        &.biyao {
          background-color: #7f4395;
        }
      }
    }
  }

  .back-top {
    display: none;
    line-height: 0;
    padding: .2rem;
    position: fixed;
    right: .4rem;
    bottom: 1.8rem;
    z-index: 3;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50px;
    .mui-icon-extra-top {
      opacity: .5;
      font: .75rem;
    }
  }

  .product-title {
    width: 100%;
    background-color: #fff;
    span {
      display: block;
    }
    .title-text {
      padding: .5rem .4rem 0 .4rem;
      font-size: .5625rem;
      line-height: .65625rem;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }

    .sub-title-text {
      padding: .2rem .4rem 0 .4rem;
      font-size: .375rem;
      line-height: .5rem;
      color: #333333;
      opacity: .5;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }

    .price-text {
      padding: .2rem .4rem 0 .4rem;
      color: #f23030;
      font-weight: 700;
      font-size: .6rem;
      line-height: 1rem;

      .score-text {
        color: #333333;
        display: inline-block;
        font-size: .3rem;
      }
    }
  }

  .product-panel {
    margin-top: .5rem;
    box-shadow: 0px 3px 3px #cccccc;

    .mui-table-view-cell {
      padding: .34375rem .46875rem;

      .mui-navigate-right {
        font-size: .53125rem;
        line-height: .65625rem;
      }
    }
  }

  .product-info-title {
    margin-top: .5rem;
    width: 100%;
    height: 1.4375rem;
    padding: .5rem;
    font-size: .4375rem;
    line-height: .4375rem;
    color: #333333;
    text-align: left;
    background-color: white;
    border-bottom: 1px solid #cccccc;
  }

  .product-info {
    box-shadow: 0px 3px 3px #cccccc;
    margin-bottom: 2rem;
    img {
      width: 100%;
    }
  }

  body {
    background-color: #fff !important;
  }

  #app {

    .mui-bar .mui-segmented-control {
      top: 0px;
      height: 44px;
      width: 60%;
    }

    .mui-slider-indicator {
      .div-item {
        display: table-cell;
        padding: 0 5%;
      }
    }

    .mui-segmented-control .mui-control-item {
      line-height: 44px;
      margin: 0 auto;
      display: table;
      padding: 0 5px;
    }

    .mui-control-content {
      min-height: 200px;
    }

    .mui-slider-group {
      transform: translate3d(0px, 0px, 0px) translateZ(0px);
      transition-duration: 200ms !important;
      transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
  }
</style>
